<template>
	<!-- <h2>推荐</h2> -->
	<div class="waterfall-container">
		<div v-for="item in tuijian_data" :key="item.pid" class="waterfall-item">
			<div class="item-content" :style="sty1">
				<img :src="proxy.img+item.img" alt="" @click='detailPage(item.pid)'>
				<div>
					<!-- 作者名字、头像、描述、采集、喜欢 -->
					<span>{{ item.ptext }}</span><br>
					<!-- <span class="iconfont icon-zhuanfa_"></span> -->
					<!-- <span class="iconfont icon-xihuan"></span> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		nextTick,
		reactive,
		onMounted,
		watch
	} from 'vue'
	import { useRouter, useRoute } from 'vue-router';
	let {proxy} = getCurrentInstance()
	let router = useRouter()
	const props = defineProps(['msg'])
	console.log(props.msg,'传的值')

	// 数组中存储的是后端返回的图片信息
	let tuijian_data = ref([])
	// 数组中四个元素，存储每一列的高度，初始为0
	let columnHeight = ref([0, 0, 0, 0])
	// 定位偏移量
	let top = ref('')
	let left = ref('')
	let sty1 = reactive({
		height:'340px',
		// border: '1px solid red'
	})

	let detailPage = (pid)=>{
		// 图片被点击后，进入详情页，将pid传过去
		router.push({path:'/detail',query:{id:pid}});
	}
	

	onMounted(async () => {
		console.log('1111111')
		let res = await proxy.$axios.get('/egg/tuijian',{
			params:{
				type:props.msg
			}
		})
		tuijian_data.value = res.data.data
		console.log(tuijian_data.value)
		nextTick().then(() => {
			console.log('执行了', '===========')
		});
	})
</script>

<style scoped>
	@import url("//at.alicdn.com/t/c/font_4298666_20h2604p94l.css");
	.waterfall-container {
		width: 1060px;
		position: relative;
	}

	/* 每一项固定宽度240px */
	.waterfall-item {
		float: left;
		padding: 15px 0 0 15px;
	}

	.waterfall-item img {
		vertical-align: top;
		width: 250px;
	}

	/* 放文字的部分高度固定80px */
	.item-content {
		width: 240px;
		/* padding: 10px; */
		/* height: 300px; */
		/* overflow: hidden; */
		/* border: 1px solid #ccc; */
		border-radius: 5px;
		background-color: #fff;
	}
	.item-content img {
		width: 240px;
		height: 300px;
	}
	.item-content span {
		font-size: 14px;
		color: #555;
		padding: 10px 20px;
	}
</style>
